<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="${s.ctx}/static/js/jquery-3.5.1.min.js" type="text/javascript"></script>

    <style type="text/css">
        div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
        .notice {
            width: 300px;/*单行显示，超出隐藏*/
            height: 35px;/*固定公告栏显示区域的高度*/
            padding: 0 30px;
            background-color: #b3effe;
            overflow: hidden;
        }
        .notice ul li {
            list-style: none;
            line-height: 35px;
            /*以下为了单行显示，超出隐藏*/
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" title="查询条件" style="height: 70px">
        <form id="mslog_qf">
            <table class="querytable">
                <tr>
                    <td class="label">公司名称：${test!}</td>
                    <td><input name="msgsmc" class="easyui-textbox" /></td>
                    <td class="label"></td>
                    <td>
                    </td>
                    <td class="label"></td>
                    <td >
                    </td>
                    <td><a id="mslog_query" onclick="changeVal()" class="easyui-linkbutton" data-options="plain:false,iconCls:'iconfont icon-standard-zoom'">查询</a></td>
                    <td><a id="mslog_clear" class="easyui-linkbutton" data-options="plain:false,iconCls:'iconfont icon-standard-cross'">清空</a></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="change">
        我是谁：改变
    </div>
    <div class="row">
        <div class="col-xs-6 pull_left">
            <div class="form-group">
                <input class="form-control" type="tel" id="verify_input" placeholder="请输入验证码" maxlength="4">
            </div>
        </div>
        <div class="col-xs-6 pull_left">
            <a href="javascript:void(0);" title="点击更换验证码">
                <img id="imgVerify" src="" alt="更换验证码" height="36" width="200px" onclick="getVerify(this);">
            </a>
        </div>
    </div>
    <div id="sjlb" data-options="region:'center',border:false" title="数据列表[双击查看详细信息]">
        <table id="mslog_grid" toolbar="#mslog_gridbar"></table>
        <div id="mslog_gridbar">
        </div>
    </div>
</div>



<div class="notice">
    <ul>
        <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
        <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
        <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
        <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
    </ul>
</div>
</body>
</html>
<script>

    //获取验证码
    function getVerify(obj){
        obj.src = "/test/getVerify?"+Math.random();
    }


    function changeVal(){
        console.log("123")
        // $("#change").html("123");
        //
        //
        // var htmls = " <ul id=\"a\">\n" +
        //     "            <li>1-1</li>\n" +
        //     "            <li>1-2</li>\n" +
        //     "            <li>1-3</li>\n" +
        //     "            <li>1-4</li>\n" +
        //     "        </ul> ";
        // $("#change").html(htmls);



        // gdxg();
        // noticeUp('.notice ul','-35px',500);
        setInterval("noticeUp('.notice ul','-35px',5000)", 5000);
    }

    //
    // $(function () {
    //     // 调用 公告滚动函数
    //     setInterval("noticeUp('.notice ul','-35px',500)", 2000);
    // });

    /*
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
*
*/
    var i=0;
    function noticeUp(obj,top,time) {
        $(obj).animate({
            marginTop: top
        }, time, function () {
            $(this).find(":first").remove();

            i = i+1;
            $(this).append("<li>第"+ i +":第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>");

            // $(this).css({marginTop:"0"}).find(":first").appendTo(this);
            // $(this).appendTo(" <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li> ");
        })
    }
</script>